<template>
  <div id="three" style="border: 1px solid black; width: 1200px; height: 800px">src/pages/THREE /BufferGeometry</div>
</template>

<script setup lang="ts">
import * as THREE from 'three';
import { BufferGeometry } from 'three';
import { onMounted } from 'vue';

onMounted(() => {
  //类型化数组创建顶点数据
  const vertices = new Float32Array([
    0,
    0,
    0, //顶点1坐标
    50,
    0,
    0, //顶点2坐标
    0,
    100,
    0, //顶点3坐标
    0,
    0,
    10, //顶点4坐标
    0,
    0,
    100, //顶点5坐标
    50,
    0,
    10, //顶点6坐标
  ]);

  // 创建属性缓冲区对象
  //3个为一组，表示一个顶点的xyz坐标
  const attribue = new THREE.BufferAttribute(vertices, 3);

  const geometry = new BufferGeometry();
  geometry.attributes.position = attribue;

  // 点渲染模式
  const material = new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10.0, //点对象像素尺寸
  });

  const points = new THREE.Points(geometry, material); //点模型对象

  const scene = new THREE.Scene();

  scene.add(points);

  const camera = new THREE.PerspectiveCamera(75, 1200 / 800, 0.1, 2000);
  camera.position.set(380, 380, 380);
  camera.lookAt(0, 0, 0);
  scene.add(camera);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(1200, 800);
  document.getElementById('three').appendChild(renderer.domElement);
  renderer.render(scene, camera);

  // const textureLoader = new THREE.TextureLoader();
  // textureLoader.load()
});
</script>

<style scoped lang="less"></style>
